<template>
  <div class="group">
    <div class="cityGroup"
         v-for="(item,key,index) in groups"
         :key="index">
      <div class="title">{{key}}</div>
      <ul class="all">
        <li class="city_con"
            v-for="(item1,index1) in item"
            :key="index1"
            @click="searchAction(item,index1)">{{item1.name}}</li>
        <div class="clearfix"></div>
      </ul>

    </div>
  </div>
</template>

<script>
export default {
  name: 'CityGroup',
  data: function () {
    return {
      groups: [],
    }
  },
  created () {
    this.$axios.get('https://elm.cangdu.org/v1/cities', {
      params: {
        type: 'group'
      }
    }).then(res => {
      // console.log(res);
      let all = res.data;
      // console.log(all)
      var newKey = Object.keys(all).sort();
      // console.log(newKey)
      var newObj = {};
      for (var i = 0; i < newKey.length; i++) {
        newObj[newKey[i]] = all[newKey[i]];
      }
      this.groups = newObj;
    }).catch(err => console.log(err));
  },
  methods: {
    searchAction (item, index) {
      this.$router.push({ name: 'SearchCity', params: { datas: item[index].name, cid: item[index].id } })
    }
  },
}
</script>

<style lang="less">
.group {
  background-color: white;
  height: 100%;
  background-color: #f5f5f5;

  .title {
    font-size: 16px;
    color: #666;
    text-indent: 0.45rem;
    background-color: white;
  }
  .all {
    margin-bottom: 10px;
    .clearfix::after {
      clear: both;
      content: "";
      display: block;
    }
  }
  .city_con {
    float: left;
    text-align: center;
    white-space: nowrap; //强制不换行
    overflow: hidden; //自动隐藏文字
    text-overflow: ellipsis; //文字隐藏后添加省略号
    color: #666;
    border-top: 0.1px solid #e4e4e4;
    border-bottom: 0.1px solid #e4e4e4;
    border-right: 0.1px solid #e4e4e4;
    width: 25%;
    padding: 5px;
    box-sizing: border-box;
    font-size: 14px;
    background-color: white;
  }
}
</style>